<form (ngSubmit)="save()" [formGroup]="form">
  <div fxLayout fxLayoutAlign="start center" mat-dialog-title>
    <span fxFlex>{{title|translate}}</span>

    <button color="warn" mat-dialog-close mat-icon-button tabindex="-1" type="button">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <mat-dialog-content fxLayout="column">

    <mat-form-field>
      <mat-select [compareWith]="compareWithId" [placeholder]="'workshop'|translate" formControlName="workshop">
        <mat-option *ngFor="let it of workshops$|async" [value]="it">
          {{it.name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="form.get('workshop').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-select [compareWith]="compareWithId" [placeholder]="'product'|translate" formControlName="product">
        <mat-option *ngFor="let it of products$|async" [value]="it">
          {{it.name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="form.get('product').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'batchNo'|translate" formControlName="batchNo" matInput required>
      <mat-error *ngIf="form.get('batchNo').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'Batch.centralValue'|translate" formControlName="centralValue" matInput required type="number">
      <span matSuffix>dtex</span>
      <mat-error *ngIf="form.get('centralValue').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
      <mat-error *ngIf="form.get('centralValue').hasError('min')">
        {{'Validator.min'|translate:form.get('centralValue').getError('min')}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'Batch.holeNum'|translate" formControlName="holeNum" matInput required type="number">
      <span matSuffix>f</span>
      <mat-error *ngIf="form.get('holeNum').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
      <mat-error *ngIf="form.get('holeNum').hasError('min')">
        {{'Validator.min'|translate:form.get('holeNum').getError('min')}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'Batch.spec'|translate" formControlName="spec" matInput required>
      <mat-error *ngIf="form.get('spec').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'tubeColor'|translate" formControlName="tubeColor" matInput required>
      <mat-error *ngIf="form.get('tubeColor').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'tubeWeight'|translate" formControlName="tubeWeight" matInput required type="number">
      <span matSuffix>KG</span>
      <mat-error *ngIf="form.get('tubeWeight').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
      <mat-error *ngIf="form.get('tubeWeight').hasError('min')">
        {{'Validator.min'|translate:form.get('tubeWeight').getError('min')}}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input [placeholder]="'silkWeight'|translate" formControlName="silkWeight" matInput required type="number">
      <span matSuffix>KG</span>
      <mat-error *ngIf="form.get('silkWeight').hasError('required')">
        {{'Validator.required'|translate}}
      </mat-error>
      <mat-error *ngIf="form.get('silkWeight').hasError('min')">
        {{'Validator.min'|translate:form.get('silkWeight').getError('min')}}
      </mat-error>
    </mat-form-field>

    <mat-checkbox formControlName="multiDyeing">{{'Batch.multiDyeing'|translate}}</mat-checkbox>

  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button [disabled]="form.pristine||form.invalid" color="primary" mat-button>{{'Common.finish'|translate}}</button>
  </mat-dialog-actions>
</form>
